<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>添加报名学生</title>
	<link rel="stylesheet" href="../css/common2.css">
	<link rel="stylesheet" href="../css/motai3.css">
	<style>
		.w-btn {
			padding: 0 10px;
			height: 32.08px;
			border: none;
			color: white;
			border-radius: 2px;
			background-image: linear-gradient(to bottom, #007fce, #009bd9, #007fd0);
			box-shadow: 0 1px 2px 0 #0f0f0f;
			cursor: pointer;
			display: inline-block;
		}

		.w-btn:active {
			transform: scale(0.95);
		}

		.xiala {
			width: 15vw;
			max-width: 140px;
			height: 35px;
			padding-left: 10px;
			font-size: 14px;
			color: #686868;
			border: 1px solid;
		}
	</style>
</head>

<body>
	<div id="vue-root" style="margin-top: 30px;	">
		<button class="w-btn">下载导入模板</button>
		<button class="w-btn">批量导入</button>
		<div style="float: right;padding-right: 6%">

			<select v-model="search.classesId" class="xiala">
				<option :value="undefined">请选择班级</option>
				<option v-for="classes in classess" :key="classes.id" :value="classes.id" v-text="classes.name">
				</option>
			</select>
			<input placeholder="请输入学生姓名" v-model="search.name"  class="xiala">
			<button class="w-btn">添加学生</button>
		</div>

		<div class="table">
			<table class="table_top">
				<thead>
					<tr>
						<th class="one">
							<input type="checkbox" class="check-box">序号
						</th>
						<th class="two">班级</th>
						<th class="two">姓名</th>
						<th class="two">总课时</th>
						<th class="two">剩余课时</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr>
						<td>0</td>
						<td>一年级4班</td>
						<td>大白</td>
						<td>总课时</td>
						<td>0</td>
						<td>
							<div class="option">
								<div class="edit-icon option-icon" style="position: absolute; left: 20%; top: 30%;">
									<img class="img" src="../image/edit.png" height="20" width="20"
										onmouseover="this.src='../image/edit_light.png'"
										onmouseout="this.src='../image/edit.png'">
								</div>

								<div class="delete-icon option-icon" style="right: 20%; top:30%;position: absolute;">
									<img class="img" src="../image/delete.png" height="20" width="20"
										onmouseover="this.src='../image/delete_light.png'"
										onmouseout="this.src='../image/delete.png'">
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<script src="/scriptZIP/vue.min.js"></script>

	<script>
		var app = new Vue(merge({
			data: {
				classess: [],
				search: {
					classesId: "",
					name: ""
				}
			},
		}))
	</script>
</body>

</html>